<template>
    <div class="w_h_100">
      <div class="inlet">报表统计 > 监管报送 > 月报 > <span class="size">经营情况表</span></div>
      <div class="header d_f j_c_s_b m_t_10">
        <div class="d_f">
          <h4>月度报送</h4>
          <el-dropdown @command="handleCommand">
            <span class="dropdown">
              {{ month }}
              <el-icon class="">
                <ArrowDown />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="(item, index) in arr" :key="index" :command="item">{{ item }}月</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <el-button type="primary" :icon="Bottom" @click="downloadOut">下载</el-button>
      </div>
      <div class="report m_t_16 ">
        <div class="w_100 headTips d_f j_c_s_b">
          <div class="d_f a_i_c">
            <div class="line"></div>
            经营情况表
          </div>
        </div>
      
        <mytable :fields="fields" ref="tableRef" :values="{}" :defaultList="records" class="m_t_20" :isSelection="false"
          :isPaginationShow="false" :handle="false" :serial="false">
        <template v-slot:projectName="{row}">
            <div :style="{marginLeft:row.num*6+'px'}">{{ row.projectName }}</div>
        </template>
        </mytable>
      </div>
    </div>
  </template>
  
  <script lang='ts'>
  import { defineComponent, reactive, toRefs, onBeforeMount } from 'vue'
  import { superviseList, superviseDownload } from "../../../api/report"
  import { momentDate, momentStartOf, derivation, momentEndOf } from '../../../utils/date'
  import {compensationRecovery} from '../../../type/report'
  import { useRoute } from 'vue-router';
  import { Bottom } from '@element-plus/icons-vue'
  export default defineComponent({
    name: '',
    setup() {
      const data:compensationRecovery = reactive({
        startTime: '',
        endTime: '',
        key: '',
        month: '',
        arr: [],
        fields: [
          {
            label: '指标名称',
            prop: 'projectName',
          },
          {
            label: '单位',
            prop: 'unit',
            width: '100px',
          },
          {
            label: '年初数',
            prop: 'initialNumber',
          },
          {
            label: '期末数',
            prop: 'closingBalance',
          },
        ],
        records: [],
        value:'',
      })
      const route = useRoute()
      onBeforeMount(() => {
        let num = Number(momentDate('MM'))
        for (let i = 1; i <= num; i++) {
          data.arr.push(i)
  
        }
        data.startTime = route.query.startTime as string
        data.endTime = route.query.endTime as string
        data.key = route.query.key as string
        data.month = route.query.month as string
        data.value=route.query.value as string
        methods.getData()
      })
  
      const methods = {
        getData() {
          superviseList({ reportSuperviseType: route.query.type as string, startTime: data.startTime, endTime: data.endTime,usci:data.value }).then((res: any) => {
           res.map(item=>{
            item.num=item.projectName.split(' ').length - 1
            for(let i in item){
              if(item[i]==''||item[i]==null||item[i]==undefined){
                item[i]='-'
              }
            }
           })
           
            data.records=res
          })
        },
        //下载全部模版
        downloadOut() {
            superviseDownload({ reportSuperviseType: route.query.type as string, startTime: data.startTime, endTime: data.endTime,usci:data.value }).then((res: any) => {
          derivation(res, '经营情况表')
        })
        },
        //选择月份
        handleCommand(e: number) {
          let year = momentDate('YYYY')
          let month = e < 10 ? '0' + e : e
          data.key = String(month)
          data.month = year + '年' + month + '月'
          methods.getBoundingClientRect()
        },
        //获取开始时间跟结束事件
        getBoundingClientRect() {
          let month = data.month.replace('年', '-')
          month = month.replace('月', '-')
          data.startTime = momentStartOf(month, 'YYYY-MM-DD')
          if (data.key == momentDate('MM')) {
            data.endTime = momentEndOf(month, 'YYYY-MM-DD')
          } else {
            data.endTime = momentEndOf(month, 'YYYY-MM-DD')
          }
          methods.getData()
        },
      }
      return {
        ...toRefs(data),
        ...methods,Bottom
      }
    }
  })
  </script>
  <style scoped lang='scss'>
  .header {
    width: calc(100% - 64px);
    background: #fff;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    height: 20px;
    padding: 24px 32px;
  
    .dropdown {
      color: #1878FF;
      font-size: 16px;
      font-weight: bold;
      margin-left: 24px;
    }
  }
  
  .report {
    overflow-y: auto;
    width: calc(100% - 64px);
    background: #fff;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    height: calc(100% - 164px);
    padding: 20px 32px;
  }
  </style>